<!DOCTYPE html>
<html><meta charset="utf-8">
<body>
<h1>UploadImage</h1>
<div id="target" class="anime">
</div>
<style>
.anime{
height:200px;background-color:#9ff;overflow:hidden;
}
<!--  -webkit-animation-name: 'rotate1';
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
}-->

@-webkit-keyframes 'rotate1' {
0% { -webkit-transform: rotateX(0); }
50% { -webkit-transform: rotateX(-92deg); }
70% { -webkit-transform: rotateX(-84deg); }
80% { -webkit-transform: rotateX(-90deg); }
95% { -webkit-transform: rotateX(-88deg); }
100% { -webkit-transform: rotateX(-90deg); }
}
</style>

<script type="text/javascript">
function FileDrop(file, el){
 
    if (!file) {
        return;
    }
   
    if(!file.type.match(/image\/\w+/)){
        alert('画像をドロップしてください。');
    }
   
    var img = document.createElement("img");
   
    var reader = new FileReader();
   
    reader.onload = function(e) {
        img.src = e.target.result;
    }
   
    reader.readAsDataURL(file);
    el.appendChild(img);
    
    var xhr = new XMLHttpRequest();
    xhr.open("post", "upload/upload.php", true);

    // Set appropriate headers
    xhr.setRequestHeader("Content-Type", "multipart/form-data");
    xhr.setRequestHeader("X-File-Name", file.fileName);
    xhr.setRequestHeader("X-File-Size", file.fileSize);
    xhr.setRequestHeader("X-File-Type", file.type);

    // Send the file (doh)
    xhr.send(file);
}
 
window.onload = function(){
  var target = document.getElementById("target");
  target.ondrop=function(e){
    e.preventDefault();
    FileDrop(e.dataTransfer.files[0],target);
  };
 
  target.ondragover=function(e){
    e.preventDefault();
  };
 
};
</script>
</body>
</html>